<!-- 
  @name: 加注站选择列表
  @date: 2020.3.19
 -->
<template>
	<view>
		<view class="search-box">
			<view class="search-content u-f-ac">
				<image class="icon-sousuo" src="/static/images/icon-sousuo.png" mode="aspectFill"></image>
				<input type="text" v-model="searchText" placeholder="请输入加注站名称" confirm-type="search" @confirm="search"/>
			</view>
		</view>
		<view class="content">
			
			<view
				class="item"
				v-for="(item, index) in lists"
				:key="item.siteId"
				@tap="clickSite(item, index)"
			>
				<view class="name">{{item.siteName}}</view>
				<view class="check_box">
					<view :class="item.chooseToList ? '_ck1' : '_ck2'" ></view>
				</view>
			</view>
			<!-- 底部加载提示 -->
			<btm-load></btm-load>
			
			<!-- 底部区域 -->
			<view class="bottom_blank"></view>
			<view class="bottom_view">
				<button class="btn_submit" @tap="submit">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: [],  //列表
				page: 1,  //页码
				chooseList: [],  //选择的列表
				addAcc: false,  //是否为添加账号时的列表
				userType: 0,  //添加账号时选择的类型，0-子账号，1-加注站职员
				searchText:''  //搜索内容
			}
		},
		onLoad(e) {
			this.addAcc = e.addAcc ? true : false;
			this.userType = parseInt(e.userType);
			this.getList();
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.pullDown();
				this.$store.commit('hasLogin');
			}
		},
		onReachBottom() {
			this.$store.commit('btmLoad', true);
			this.getList();
		},
		onPullDownRefresh() {
			this.pullDown();
		},
		methods: {
			search() {
				this.page = 1;
				this.lists = [];
				this.getList();
			},
			//下拉刷新
			pullDown() {
				this.chooseList = [];
				this.lists = [];
				this.page = 1;
				this.getList();
			},
			//确定
			submit() {
				if(this.chooseList.length === 0) {
					this.$showToast('请选择加注站！');
					return;
				}
				uni.$emit('common_chooseSite', this.chooseList);
				uni.navigateBack({ delta: 1 });
			},
			//点击加注站
			clickSite(item, index) {
				if(this.addAcc && this.userType === 1) {
					//添加加注站职员，只能单选
					if(!item.chooseToList) {
						this.chooseList = [];
						this.lists.forEach(item => item.chooseToList = false);
						this.chooseList.push(item);
						this.lists[index].chooseToList = true;
					}
				} else {
					if(item.chooseToList) {
						//将已选择的移除
						let si = this.chooseList.findIndex(it => it.siteId === item.siteId);
						this.chooseList.splice(si, 1);
						this.lists[index].chooseToList = false;
					} else {
						this.chooseList.push(item);
						this.lists[index].chooseToList = true;
					}
				}
			},
			//获取列表
			getList() {
				let api = 'getfillsitepage';
				let data = {
					page: this.page,
					rows: 40,
					keyword: this.searchText
				};
				if(this.addAcc) {
					api = 'getfillsitebytype';
					data.type = this.userType;
				}
				this.$http({
					url: this.$api.siteUrl + api,
					data: data
				}).then(res => {
					let arr = res;
					if(arr && arr.length > 0 ) {
						arr.forEach(item => item.chooseToList = false);
						this.lists = this.lists.concat(arr);
						this.page += 1;
					}
					
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $color-white;
	}
	.search-box {
		position: fixed;
		width: 100vw;
		top: 0;
		padding: 20rpx 40rpx;
		background-color: #407CFF;
		.search-content {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FFFFFF;
			height: 68rpx;
			border-radius: 40rpx;
		}
		.icon-sousuo {
			width: 30rpx;
			height: 30rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
	}
	
	.content {
		padding-top: 120rpx;
		padding-left: 40rpx;
		padding-right: 50rpx;
		padding-bottom: 50rpx;
		overflow-x: hidden;
	}
	
	.item {
		width: 100%;
		padding: 36rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		.name {
			flex: 1;
		}
	}
</style>
